import React, { useState, useEffect } from 'react';
// import React from 'react'
import { connect } from 'react-redux'
import { Card, Switch, Input, Select, message, Button } from 'antd';
import style from "./style.module.css"
import axios from '../../../utils/request';
const { Option } = Select;

const LiveManage = (props) => {
    //获取直播数据
    const [liveData, setData] = useState([])

    useEffect(() => {
        axios.get('/api/livelist').then(res => {
            setData(res.data)
        })
    }, [])

    //删除
    const handleDel = (id) => {
        axios.delete(`/api/dellive/${id}`).then(res => {
            axios.get('/api/livelist').then(res => {
                setData(res.data)
            })
            if (res.code === 1) {
                message.info("删除成功")
            } else {
                message.info("删除失败")
            }
        })
    }

    //直播跳转
    const handleDetail = (item) => {
        if (item.flag === 1) {
            props.history.push('/camera')
        } else {
            props.history.push('/details')
        }
    }

    //开关按钮
    const handleSwitch = (item) => {
        axios.post('/api/setZhiboState', { flag: item.flag, id: item.id }).then(res => {
            axios.get('/api/livelist').then(res => {
                setData(res.data)
            })
        })
    }

    //下拉框
    const handleSelect = (state) => {
        axios.get('/api/livelist', { params: { flag: state } }).then(res => {
            setData(res.data)
        })
    }

    //搜索
    const handleSearch = (value) => {
        console.log(value)
        axios(`/api/livelist`, { params: { keyword: value.target.defaultValue } }).then(res => {
            setData(res.data)
        })
    }

    return (
        <div className='liveManage'>
            <Card>
                <div className={style.searchBox}>
                    <div className={style.searchShow}>
                        <p>直播状态:</p>
                        <Select style={{ width: 120 }} onChange={handleSelect}>
                            <Option value="">全部</Option>
                            <Option value="1">直播中</Option>
                            <Option value="0">结束</Option>
                        </Select>
                    </div>
                    <div className={style.searchIpt}>
                        <p>主播搜索:</p>
                        <Input placeholder="请搜索" onPressEnter={handleSearch} />
                    </div>
                </div>
                <h3 className={style.liveh3}>全部直播</h3>
                <div className={style.livedl}>
                    {
                        liveData.map((item, index) => {
                            return <dl key={index}>
                                <dt>
                                    <img src={item.img} alt="" />
                                    <span className={style.statusBox}>{item.flag === 1 ? "直播中" : "结束"}</span>
                                </dt>
                                <dd>
                                    <h3>{item.title}</h3>
                                    <div className={style.streamest}>
                                        <p>{item.name}</p>
                                        <p>{item.createtime}</p>
                                    </div>
                                    <p className={style.streaming}>
                                        <span className={style.spanend} onClick={() => { handleDetail(item) }}>{item.flag === 1 ? "进去直播" : "回放"}</span>
                                        <Button type="text" onClick={() => handleDel(item.id)}>{item.flag === 1 ? "" : "删除"}</Button>
                                        <Switch checked={item.flag} onChange={() => handleSwitch(item)} />
                                    </p>
                                </dd>
                            </dl>
                        })
                    }
                </div>
            </Card>
        </div>
    );
}
export default connect((state) => {
    return {
    }
})(LiveManage);
